<template>
  <div class="biaoqi">
    <el-dialog title="云账户注册" :visible.sync="log" :close-on-click-modal="false" width="1200px">
    	<!-- 注册 -->
    	<div v-if="nowtype==1" style="font-size: 14px;color: #005AFF;margin-bottom: 30px;">我们已经成为云账户的技术服务商，您在该页面申请成功后可以直接绑定云账户，无需再做配置。</div>
    	<!--  编辑 -->
    	<div v-if="nowtype==2&&failres!=''"  class="baibeijing" style="  margin-bottom: 20px;">
    	  <div style="color:#999898;font-size: 14px;">申请失败，请查看失败原因</div>
    	  <div style="margin-top: 20px;margin-bottom: 10px;">失败原因：</div>
    	  <div style="color: #FF0000;font-size: 14px;">{{ failres }}</div>
    	</div>
    	<div class="baibeijing" style="  margin-bottom: 20px;">
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">企业统一社会信用代码</div><el-input :disabled="!iscanup" v-model="reform.enterprise_num" placeholder="请输入"  style="width: 360px; margin-right: 20px;"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">企业名称</div><el-input :disabled="!iscanup" placeholder="请输入" v-model="reform.enterprise_name" style="width: 360px; margin-right: 20px;"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">企业营业执照影印件</div>
          <chuantu ref="chuantu" v-if="nowtype==1||showold" @getimg="getimg1" :imgs="imgs1" ></chuantu>
          <div class="t_item_info_tips" style="margin-left: 20px;">上传图片或 PDF</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">平台企业名称</div><el-input  :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.product_name" :maxlength="12"></el-input>
    	    <div class="t_item_info_tips">平台企业别名，最大支持 12 个字符</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">联系人姓名</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.admin_user_name" :maxlength="30"></el-input>
    	    <div class="t_item_info_tips">支持中文、英文，最大支持 30 个字符</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">联系人邮箱</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.admin_user_email"></el-input>
    	    <div class="t_item_info_tips" style="padding-left: 220px; margin-top: 10px;">若已创建云账户综合服务平台账号，则可用于登录云账户综合服务平台，也可接收邀约开户提醒邮件</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">联系人手机号</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.admin_user_tel"></el-input>
    	    <div class="t_item_info_tips"style="padding-left: 220px; margin-top: 10px;">若已创建云账户综合服务平台账号，则可用于登录云账户综合服务平台时，接收验证码。仅支持中国大陆手机号</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">签约人类型</div>
    	    <el-select :disabled="!iscanup" style="width: 360px; margin-right: 20px;" placeholder="请选择" v-model="reform.sign_user_type">
    	      <el-option label="企业法人" value="1">
    	      </el-option>
    	    </el-select>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">签约人真实姓名</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.sign_user_name"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">签约人身份证号码</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.sign_id_num"></el-input>
    	    <div class="t_item_info_tips">如果身份证号码包含 X，需大写</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">签约人手机号</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.sign_tel"></el-input>
    	    <div class="t_item_info_tips">用于接收签约短信验证码。仅支持中国大陆手机号</div>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">签约人邮箱</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.sign_email"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">签约人身份证正面</div>

          <chuantu ref="chuantu" v-if="nowtype==1||showold" @getimg="getimg2" :imgs="imgs2" ></chuantu>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title"> 签约人身份证反面</div>
          <chuantu ref="chuantu" v-if="nowtype==1||showold" @getimg="getimg3" :imgs="imgs3" ></chuantu>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">纳税人类型</div>
    	    <el-select :disabled="!iscanup" style="width: 360px; margin-right: 20px;" placeholder="请选择" v-model="reform.taxpayer_type">
    	      <el-option label="一般纳税人" value="1">
    	      </el-option>
    	      <el-option label="小规模纳税人" value="2">
    	      </el-option>
    	    </el-select>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">公司注册地址</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.enterprise_address"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">公司电话</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.enterprise_tel"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">公司开户行</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.enterprise_bank"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">公司银行账号</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.enterprise_bank_no"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title">接收报税文件邮箱</div><el-input :disabled="!iscanup" placeholder="请输入"  style="width: 360px; margin-right: 20px;" v-model="reform.receive_tax_email"></el-input>
    	  </div>
    	  <div class="kflexc t_item_info">
    	    <div class="yzh_title" ></div><el-checkbox :disabled="!iscanup"  style="margin-right: 5px;" v-model="nowchoose" >同意云账户</el-checkbox ><span @click="opennow" class="t_usernow" style="color: #005AFF;">《数字证书企业客户须知》 </span>
    	  </div>
        </div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="primary" size="small" @click="baocunpeizhi">确定</el-button>
    	</span>
    </el-dialog>

    <!-- 用户须知 -->
        <el-dialog
          title="用户须知"
          :visible.sync="isshownow"
          width="60%">
          <div style="text-align: center;font-size: 24px;color: #404247;">数字证书企业客户须知 </div><br/><br/>
          <p>尊敬的企业客户：  </p><br/>
          <p>根据《中华人民共和国电子签名法》的规定，可靠的电子签名与手写签名或者盖章具有同等的法律效力。电子签名数字证书（以下简称“数字证书”）是认证服务机构（Certificate Authority，下称“认证机构”）签发的用于识别签约主体身份的数字证书。</p><br/>
          <p>一、为保证签约的效力、维护双方的合法权益，云账户（天津）共享经济信息咨询有限公司（简称“云账户”）拟通过电子签名的方式与您签署合作协议及其他法律文件。就数字证书的生成及调用事宜，您向云账户作出如下授权：</p><br/>
          <p>1、您同意并授权云账户使用您向云账户披露、确认的企业名称、统一社会信用代码、联系人姓名、联系人身份证号及联系人手机号码，并将前述信息共享给认证机构用于生成您的数字证书，认证机构将对您的信息进行核实、验证。</p><br/>
          <p>2、您同意并授权在您与云账户签署《灵活就业服务合作协议》及其他法律文件时，云账户调用您的数字证书用于签名。</p><br/>
          <p>3、您认可通过调用您的数字证书产生的电子合同及其他法律文件具有法律效力，且承诺履行相关的义务与责任。</p><br/>
          <p>二、您保证所提供信息的真实性、准确性和完整性，如因您提供的信息错误导致数字证书无法生成或《灵活就业服务合作协议》及其他法律文件无法有效签署的，您应补充提供或更正相关信息并承担相应责任。</p><br/>
          <p>三、签署电子合同或其他法律文件前，认证机构将向您预留的联系人手机号码发送签署验证码，当您收到签署验证码时，应确保签署请求由您发起，且对验证码承担保密义务。如您使用的数字证书私钥泄漏、丢失，或者您不希望继续使用数字证书，或者您的主体不存在，您应当立即向云账户申请废止该数字证书。因您原因致使证书私钥泄露、损毁或者丢失的，损失由您承担。</p><br/>
          <p>四、您明确了解数字证书是您的网上合法身份标识，通过数字证书签署的电子合同及法律文件与您签字的合同及文件具有同等效力。</p><br/>
         <p>五、本须知自您或您的授权代表点击、勾选或以其他方式确认本须知时生效，有效期至您与云账户签署的合作协议及其他法律文件到期之日（以最晚到期日为准）。</p>


          <div style="text-align: center;margin-top: 20px;">
            <el-button round  @click="isshownow = false">关 闭</el-button>
            <el-button round type="primary" @click="agreebtn">我已了解并同意</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import chuantu from "@/components/zujian/chuantu.vue";
  export default {
    components:{
      chuantu
    },
    name: "biaoqi",
    data() {
      return {
        log:true,
        isshownow:false,
        nowchoose:false,
        nowtype:'',
        reform:{

          enterprise_num:'',
          enterprise_name:'',
          enterprise_pic:'',
          // product_id:'',
          product_name:'',

          admin_user_name:'',
          admin_user_email:'',
          admin_user_tel:'',
          sign_type:'1',
          sign_user_type:'',
          sign_user_name:'',
          sign_id_num:'',
          sign_tel:'',
          sign_email:'',
          sign_user_pic_1:'',
          sign_user_pic_2:'',
          taxpayer_type:'',
          enterprise_address:'',
          enterprise_tel:'',
          enterprise_bank:'',
          enterprise_bank_no:'',
          receive_tax_email:'',
          agree_agreement:'1',
          // notify_url:'',
          // ref:'',
          // broker_id:''
        },
        user:'',
        imgs1:'',
        imgs2:'',
        imgs3:'',
        showold:false,
        iscanup:true,
        failres:'',
      }
    },
    created() {
      this.getinfo()
    },
    mounted() {

    },
    methods: {
      //接受图片
      getimg1(val){
        this.reform.enterprise_pic = val
      },
      getimg2(val){
        this.reform.sign_user_pic_1 = val
      },
      getimg3(val){
        this.reform.sign_user_pic_2 = val
      },
      //打开用户须知
      opennow(){
        this.isshownow = true
      },
      //保存
      baocunpeizhi(){
        if(!this.nowchoose){
          this.$message.error('请先勾选同意云账户用户须知');
          return
        }
        if(this.roleform()){
          this.$message.error('信息未填写完整');
          return
        }

        axios.post('/api/plan-market/yunzhifu/applyCount',this.reform).then((response)=>{
          if (response.data.msg.code == 0) {
            // console.log('注册回调')
            this.$message({
              message: '操作成功',
              type: 'success'
            });
         //    this.$router.push({
      			// 	path: '/xitongpeizhi'
      			// });
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      } ,
      //同意
      agreebtn(){
        this.isshownow = false
        this.nowchoose = true
      },
      //验证数据是否填写完整
      roleform(){
        if(
          this.reform.enterprise_num==''||
          this.reform.enterprise_name==''||
          this.reform.enterprise_pic==''||
          this.reform.product_name==''||
          this.reform.admin_user_name==''||
          this.reform.admin_user_email==''||
          this.reform.sign_user_type==''||
          this.reform.sign_user_name==''||
          this.reform.sign_id_num==''||
          this.reform.sign_tel==''||
          this.reform.sign_email==''||
          this.reform.sign_user_pic_1==''||
          this.reform.sign_user_pic_2==''||
          this.reform.taxpayer_type==''||
          this.reform.enterprise_address==''||
          this.reform.enterprise_tel==''||
          this.reform.enterprise_bank==''||
          this.reform.enterprise_bank_no==''||
          this.reform.receive_tax_email==''
          ){
            return true
        }else{
          return false
        }
      },
      //获取详情
      getinfo(){
        axios.get('/api/plan-market/yunzhifu/getSubmitInfo').then((response)=>{
          if (response.data.msg.code == 0) {
            if(response.data.data){
              this.reform.enterprise_num = response.data.data.enterprise_num
              this.reform.enterprise_name = response.data.data.enterprise_name
              this.reform.enterprise_pic = response.data.data.enterprise_pic
              this.reform.product_name = response.data.data.product_name
              this.reform.admin_user_name = response.data.data.admin_user_name
              this.reform.admin_user_email = response.data.data.admin_user_email
              this.reform.admin_user_tel = response.data.data.admin_user_tel
              this.reform.sign_user_type = response.data.data.sign_user_type
              this.reform.sign_user_name = response.data.data.sign_user_name
              this.reform.sign_id_num = response.data.data.sign_id_num
              this.reform.sign_tel = response.data.data.sign_tel
              this.reform.sign_email = response.data.data.sign_email
              this.reform.sign_user_pic_1 = response.data.data.sign_user_pic_1
              this.reform.sign_user_pic_2 = response.data.data.sign_user_pic_2
              this.reform.taxpayer_type = response.data.data.taxpayer_type
              this.reform.enterprise_address = response.data.data.enterprise_address
              this.reform.enterprise_tel = response.data.data.enterprise_tel
              this.reform.enterprise_bank = response.data.data.enterprise_bank
              this.reform.enterprise_bank_no = response.data.data.enterprise_bank_no
              this.reform.receive_tax_email = response.data.data.receive_tax_email
              this.imgs1 = response.data.data.enterprise_pic
              this.imgs2 = response.data.data.sign_user_pic_1
              this.imgs3 = response.data.data.sign_user_pic_2
              this.showold = true
              this.failres = response.data.data.status_comment
              if(response.data.data.status.toString()=='0'){
                this.iscanup = true
              }else{
                this.iscanup = false
              }
            }else{
              this.showold = true
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .yzh_title{ width: 200px; margin-right: 20px; text-align: right;}
  .t_item_info{ margin-bottom: 20px;}
</style>
